<template>
    <div id="topic">

        <div id="topic-header" @click="gotoTopic()">
            精选专题<van-icon name="arrow" />
        </div>

        <div class="topic-box">
            <div 
                class="topic-container"
                v-for="(item,index) in topic"
                :key="index"
                @click="goToDetail(item.id)">
                <img :src="item.pic" alt="">
                <div class="topic-container-box">
                    <div class="topic-container-box-title">{{item.title}}</div>
                    <div class="topic-container-box-desc">{{item.descript}}</div>
                </div>
            </div>
        </div>
        
    </div>
</template>

<script>
export default {
    data() {
        return {
            topic:[],
        }
    },
    mounted() {
        // 精选专题
        this.$API.topic().then((res)=>{
            console.log(res);
            this.topic = res.data.data;
        }).catch((error)=>{
            console.log(error);
        });
    },
    methods: {
        // 点击 进入精选专题列表页==>严选专栏
        gotoTopic(){
            this.$router.push("/Topiclist");
        },
        // 点击 跳转文章 详情
        goToDetail(id){
            this.$router.push({
                path:"/TopDetail",
                query:{
                    id,
                }
            })
        }
    },
}
</script>

<style lang="scss">
#topic{
    width: 100%;
    background-color: #fff;
    margin-top:0.2rem;
    #topic-header{
        width: 100%;
        padding:14px 0;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        .van-icon{
            margin-left:0.3rem;
        }
    }
    .topic-box{
        width:100%;
        display: inline-flex;
        justify-content: flex-start;
        align-items: flex-start;
        overflow-X: scroll;
        .topic-container{
            width:6.4rem;
            text-align: left;
            margin-left:0.15rem;
            img{
                width:6.4rem;
                height:4rem;
                border-radius: 0.1rem;
            }
            .topic-container-box{
                width:100%;
                .topic-container-box-title{
                    width:100%;
                    font-size: 0.28rem;
                    margin:0.1rem 0;
                    white-space: nowrap; //强制不换行
                    overflow: hidden; //超出部分隐藏
                    text-overflow: ellipsis; //显示‘...’
                }
                .topic-container-box-desc{
                    width:80%;
                    margin:0.15rem 0;
                    color:gray;
                    font-size: 0.25rem;
                    white-space: nowrap; //强制不换行
                    overflow: hidden; //超出部分隐藏
                    text-overflow: ellipsis; //显示‘...’
                }
            }
        }
    }
}
</style>